<script setup lang="ts">
import Event from "@/views/customEevnt/Event.vue";
import Event1 from "@/views/customEevnt/Event1.vue";
const handler = () => {
  alert(12345);
};
const handler1 = (a: any, b: any, c: any, $event: any) => {
  console.log(a, b, c, $event);
};
const handler2 = () => {
  console.log(123);
};
const handler3 = (param1: any) => {
  console.log(param1);
};
const handler4 = (param1: any) => {
  console.log(param1);
};
</script>

<template>
  <div class="box1">
    <!--原生Dom事件    事件对象-->
    <h1>父组件</h1>
    <pre @click="handler">
    大江东去浪淘尽，千古风流人物。
    </pre>
    <button @click="handler1(1, 2, 3, $event)">传递多个参数</button>
    <hr />
    <!--Vue3@click原生Dom -->
    <Event @click="handler2"></Event>
    <hr />
    <!--自定义事件，实现子组件传递参数给父组件-->
    <Event1 @xxx="handler3" @click="handler4"></Event1>
  </div>
</template>

<style scoped>
.box1 {
  background: wheat;
  //height: 900px;
}
</style>
